<template>
  <!-- 产品类别 -->
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="p-20" v-for="(item, index) in list" :key="index">
      <cxTreeListItem
        :paramData="item"
        layer="0"
        @addItem="addItem"
        @delectItem="delectItem"
        @clickItem="clickItem"
      ></cxTreeListItem>
    </view>
    <!-- 弹窗 -->
    <u-modal
      :show="expenseTypeShow"
      :title="title"
      @cancel="close"
      @confirm="addData"
      :showCancelButton="showCancelButton"
      confirmText="保存"
    >
      <u--input
        placeholder="请输入内容"
        border="surround"
        v-model="typeValue"
      ></u--input>
    </u-modal>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import cxTreeListItem from "@/components/cx-tree-list-item/cx-tree-list-item.vue";
import { getCategoryList,addCategoryData } from "@/apis/bill/information/supplier";
import { arrayToTree } from "@/utils/util.js";
export default {
  components: {
    clIcon,
    cxTreeListItem,
  },
  props: {},
  data() {
    return {
      showCancelButton: true,
      title: "新增产品类别",
      expenseTypeShow: false,
      typeValue: null,
      config: {
        title: "产品类别",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      list: [],
      pid: null,
      cxTreeListItemShow: true,
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    clickItem(item){
      uni.$emit("category",item)
      uni.$emit("on-selected-customer",item)
      this.$Router.back()
    },
    delectItem(item) {
      delectCategoryData(item.id).then((res) => {
        if (!res.flag) return;
      });
      this.initData();
    },
    // 触发回调函数
    addItem(item) {
      this.pid = item.pid;
      this.expenseTypeShow = true;
    },
    close() {
      this.pid = null;
      this.typeValue = null;
      this.expenseTypeShow = false;
    },
    addData() {
      if (this.pid) {
        addCategoryData({
          pid:this.pid,
          name: this.typeValue,
        }).then((res) => {
          if (!res.flag) ;
        });
      } else {
        addCategoryData({ name: this.typeValue }).then((res) => {
          if (!res.flag) ;
        });
      }
      this.close();
      this.initData();
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      getCategoryList().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.list = []
        this.list = arrayToTree(data);
        // this.$forceUpdate()
      });
    },

    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.expenseTypeShow = true;
        // 有这个页面
        // this.$Router.push({
        //   name: "addProductCategory",
        // });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
